.query-tool,
.mark-tool {
  width: 52px;
  padding: 10px 12px 12px;
  background-color: rgba(255, 255, 255, 0.08);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #cedee0;
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
}
.mark-tool {
  margin-left: 16px;
}
.query-tool::after,
.mark-tool::after {
  content: "";
  width: 8px;
  height: 8px;
  background-color: #111e26;
  transform: rotate(45deg);
  position: absolute;
  right: -4px;
  top: calc(50% - 4px);
}
.query-tool:hover,
.mark-tool:hover {
  cursor: pointer;
  user-select: none;
  color: #13fffb;
}
.query-tool-list,
.mark-tool-list {
  align-items: center;
  justify-content: flex-start;
  color: #cedee0;
  transition: all 1s;
  &-item {
    // width: 56px;
    height: 53px;
    margin-left: 8px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    margin-left: 16px;
    :deep(.arco-select-view-single) {
      width: 92px;
      height: 24px;
      background-color: transparent;
      border: 1px solid #8EA7B2;
      margin-left: 16px;
      padding-left: 8px;
      padding-right: 6px;
      // margin-right: 12px;
      // border-right: 1px solid rgba(255, 255, 255, 0.16);
      .arco-select-view-value {
        min-height: unset;
        line-height: unset;
        font-size: 12px;
        color: #8EA7B2;
        padding-top: 0;
        padding-bottom: 0;
      }
      .arco-select-view-suffix {
        color: #8EA7B2;
        padding-left: 0;
      }
    }
    .icon-box {
      width: 30px;
      height: 30px;
      line-height: 30px;
      margin: 0 auto;
      border-radius: 4px;
      i {
        font-size: 30px;
      }
      .icon-dingwei {
        font-size: 18px;
      }

    }
    .label {
      margin-top: 2px;
    }
    .disabled{
      .label{
        color: #9bb2bc;
      }
      .icon-box > i {
        color: #9bb2bc;
      }
    }
  }
  &-item:hover {
    .icon-box {
      background: #28353c;
    }
    .label {
      color: #cedee0;
      margin-top: 2px;
    }
  }
  &-item.active {
    .icon-box {
      background: #074452;
      box-shadow: inset 0px 0px 4px rgba(19, 255, 251, 0.15);
    }
    .label {
      color: #13fffb;
      margin-top: 2px;
    }
  }
}